<template>
  <div class="container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="身份验证"></el-step>
      <el-step title="新密码"></el-step>
    </el-steps>
    <el-row>
      <el-col :span="9" :xs="2"> </el-col>
      <el-col :xs="20" :span="6">
        <!-- 步骤1----------------------------------------------------------------------------------------------------- -->
        <div class="box" v-show="'0'==active">
          <div class="input1">
            <el-input v-model="phone" placeholder="手机号" clearable size="large" maxlength="11">
              <template #prepend>+86</template>
            </el-input>
          </div>
          <div class="input2">
            <el-input v-model="code" placeholder="验证码" size="large" maxlength="4">
              <template #append>
                <el-button v-show="!codeTimeShow" @click="getPhoneCode">获取验证码</el-button>
                <span v-show="codeTimeShow">{{codeTime}}</span>
              </template>
            </el-input>
          </div>

          <el-button class="nextbtn" type="success" :disabled="false" @click="++active">下一步
          </el-button>
        </div>
        <!-- 步骤2----------------------------------------------------------------------------------------------------- -->
        <div class="box" v-show="'1'==active">
          <div class="input2">
            <el-input v-model="password" placeholder="密码(8-16位)" clearable size="large"
              maxlength="20" type="password" />
          </div>
          <div class="input2">
            <el-input v-model="password1" placeholder="确认密码" clearable size="large" maxlength="20"
              type="password" />
          </div>
          <el-button class="prebtn" :disabled="false" @click="--active">上一步</el-button>
          <el-button class="nextbtn" type="success" :disabled="false" @click="update">确定
          </el-button>
        </div>

      </el-col>
      <el-col :span="9" :xs="2"> </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
export default {
  data () {
    return {
      active: 0,
      phone: "",
      code: "",
      codeTime: 60,
      codeTimeShow: false,
      name: "",
      password: "",
      password1: ""
    }
  },
  components: {
  },
  methods: {
    update () {
      if (this.password == "" || this.password != this.password1) {
        ElMessage({
          message: "两次密码不一致",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      }
      this.$axios.put("/user/password/" + this.password + "/" + this.code).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
        }
      })
    },

    //发送验证码
    getPhoneCode () {
      this.changeCodeTime();
      const params = new URLSearchParams();
      params.append('phone', this.phone);
      this.$axios.post('/user/smscode', params).then((res) => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 3000,
          })

        } else {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'error',
            duration: 2000,
          })
        }
      })
    },
    //验证码倒计时
    changeCodeTime () {
      this.codeTime = 60;
      this.codeTimeShow = true;
      let that = this;
      let codeclock = setInterval(function () {
        that.codeTime--;
        if (that.codeTime < 1) {
          that.codeTimeShow = false;
          clearInterval(codeclock);
        }
      }, 1000);
    },
  }
}
</script>

<style scoped>
.box {
  position: relative;
  margin-top: 40px;
}
.input1,
.input2 {
  padding: 10px;
  /* margin: 0 auto; */
  width: 90%;
}
.nextbtn {
  margin-top: 30px;
  position: absolute;
  right: 0px;
}
.prebtn {
  margin-top: 30px;
  position: absolute;
  left: 0px;
}
</style>